.sw-sidebar-navigation-item {
    position: relative;
    width: var(--scale-size-64);
    height: var(--scale-size-64);
    color: var(--color-icon-primary-default);
    border: none;
    background: none;
    cursor: pointer;
    outline: none;

    &:focus-visible {
        outline: var(--scale-size-2) solid var(--color-border-brand-selected);
        outline-offset: calc(var(--scale-size-2) * -1);
    }

    &:hover:not(.is--disabled) {
        color: var(--color-icon-brand-default);
    }

    &.is--active {
        background: var(--color-background-brand-default);
        color: var(--color-icon-brand-default);
    }

    &.is--disabled {
        cursor: not-allowed;
        opacity: 0.3;
    }

    .mt-icon {
        width: var(--scale-size-20);
        height: var(--scale-size-20);
        padding: var(--scale-size-1);
    }

    .sidebar-item-badge {
        position: absolute;
        transform: translate(-30%, 70%);
        border-radius: var(--scale-size-18);
        color: var(--color-text-static-default);
        font-size: var(--font-size-2xs);
        font-style: normal;

        &.is--info {
            background-color: var(--color-icon-brand-default);
        }

        &.is--warning {
            background-color: var(--color-icon-attention-default);
        }

        &.is--error {
            background-color: var(--color-icon-critical-default);
        }

        &.is--success {
            background-color: var(--color-icon-positive-default);
        }
    }

    .notification--badge {
        top: 0;
        right: 0;
        padding: var(--scale-size-2) var(--scale-size-8);
    }

    .dot--badge {
        top: var(--scale-size-8);
        right: var(--scale-size-10);
        padding: var(--scale-size-4);
    }
}
